<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #box span{
            color: #f00;
            font-size: 20px;
            font-weight: 700;
            position: absolute;
        }

    </style>
</head>
<body>
    <h1>蛇形文字</h1>
    <hr>

    <div id="box">
                <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
        <span>卍</span>
    </div>

    <script>
        var spans = document.getElementById('box').getElementsByTagName('span');
        // console.log(spans);
        
        // 移动事件
        window.onmousemove = function(e) {
            for (var i = 0; i < spans.length; i++) {
                // 闭包
                (function(i){
                    // 定时器
                    setTimeout(function (){
                        spans[i].style.left = e.x + (i*25) + 'px';
                        spans[i].style.top = e.y + 'px';
                    }, i*150);
                })(i);
            }
        }

    </script>


    
</body>
</html>



